<template>
  <div class="goods-list">
    <van-nav-bar title="商品列表" left-arrow @click-left="$router.go(-1)"/>
    <div class="search-bar">
      <van-search
        readonly
        show-action
        shape="round"
        placeholder="搜索你要找的商品"
        v-model="searchValue"
        @click="$router.go(-1)"
      >
        <template #action>
          <van-icon name="apps-o"/>
        </template>
      </van-search>
    </div>
    <div class="search-tab">
      <van-tabs @click="onTabChange" type="card">
        <van-tab title="综合" name="all"></van-tab>
        <van-tab title="销量" name="sales"></van-tab>
        <van-tab title="价格" name="price">
          <template #title>
            <span>价格</span>
            <div class="price-sort">
              <van-icon name="arrow-up" :class="sortClass === 'asc' ? 'orange' : 'black'"
                        @click.stop="setSort('asc')"/>
              <van-icon name="arrow-down" :class="sortClass === 'desc' ? 'orange' : 'black'"
                        @click.stop="setSort('desc')"/>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <div class="container">
      <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        success-text="刷新成功"
      >
        <van-empty description="暂无数据" v-if="this.goodsList.length===0"/>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="我是底线"
          class="goods-center"
          @load="onLoad"
        >
          <goods-item v-for="goods in goodsList" :key="goods.goods_id" :goods="goods"/>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import GoodsItem from '@/components/GoodsItem.vue'
import { queryGoodsList } from '@/api/goods'

export default {
  components: { GoodsItem },
  data () {
    return {
      searchValue: '',
      sortType: 'all',
      sortClass: '',
      goodsList: [],
      totalNum: 0,
      page: 0,
      pageSize: 3,
      refreshing: false,
      loading: false,
      finished: false,
      categoryId: null
    }
  },
  methods: {
    async fetchData (isRefresh = false) {
      this.page++
      const params = {
        sortType: this.sortType,
        sortPrice: this.sortClass === 'asc' ? '0' : '1',
        categoryId: this.categoryId,
        goodsName: this.searchValue,
        pageNo: this.page,
        pageSize: this.pageSize
      }
      const {
        data,
        totalNum
      } = await queryGoodsList(params)
      if (isRefresh) this.goodsList = []
      const ids = new Set(this.goodsList.map(item => item.goods_id))
      data.forEach(item => {
        if (!ids.has(item.goods_id)) {
          this.goodsList.push(item)
        }
      })
      if (this.goodsList.length >= totalNum) {
        this.finished = true
      }
      if (this.goodsList.length < totalNum && this.goodsList.length !== 0) {
        this.finished = false
      }
      if (this.goodsList.length === 0) {
        this.finished = false
      }
    },
    onRefresh () {
      this.page = 0
      this.totalNum = 0
      this.refreshing = true
      this.fetchData(true)
      this.refreshing = false
    },
    onLoad () {
      this.fetchData(false)
      this.loading = false
    },
    onTabChange (name, title) {
      if (name === 'price') {
        this.sortClass = 'asc'
      }
      this.sortType = name
      this.onRefresh()
    },
    setSort (val) {
      console.log(val)
      this.sortClass = val
      this.onRefresh()
    }
  },
  created () {
    this.searchValue = this.$route.query.goodsId
    this.categoryId = this.$route.query.categoryId
  },
  mounted () {
    this.finished = true
    this.fetchData(false)
    this.finished = false
  }
}
</script>

<style lang="less" scoped>
.goods-list {
  .van-nav-bar {
    position: fixed;
    width: 100%;
    top: 0;
  }

  .search-bar {
    margin-top: 46px;
    top: 0;
  }

  .search-tab {
    position: sticky;
    width: 100%;
    top: 46px;
    z-index: 999;

    .orange {
      color: #e49a3d;
    }

    .black {
      color: black;
    }

    .van-tabs {
      ::v-deep .van-tabs__nav {
        border: none;
      }

      ::v-deep .van-tab {
        border: none;
        color: black;
      }
    }

    ::v-deep .van-tabs__nav--card .van-tab.van-tab--active {
      background-color: white;
      color: #e49a3d;
      margin: 0;
    }

    ::v-deep .van-tab__text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .price-sort {
      display: flex;
      flex-direction: column;
    }
  }

  .container {
    border-top: 1px solid #f7f8fa;
    margin-top: 10px;

    .goods-center {
      overflow-y: auto;
    }
  }
}
</style>
